<template>
  <div class="edit-form edit-dialog">
    <el-form
      ref="ruleForm"
      v-loading="loading"
      :rules="rules"
      :model="Bean.formData"
      label-width="85px"
    >
      <el-descriptions
        :column="2"
        border
        :colon="true"
        label-class-name="custom-description-label-160"
      >
        <el-descriptions-item>
          <template #label>上级机构</template>
          <el-form-item>
            <el-input
              v-model="parentInfo.orgName"
              disabled
              placeholder="请输入机构名称"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            机构名称
          </template>
          <el-form-item prop="orgName">
            <el-input
              v-model="Bean.formData.orgName"
              placeholder="请输入"
              :disabled="isEdit ? true : false"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>
            <span class="colorRed">*</span>
            所在区划
          </template>
          <area-cascader
            v-model="Bean.formData.areaArr"
            :strictly="true"
            width="100%"
          />
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>备注</template>
          <el-form-item>
            <el-input
              v-model="Bean.formData.remark"
              type="textarea"
              maxlength="200"
              show-word-limit
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div class="btn-group">
      <el-button class="btn-form-close" @click="close()">取消</el-button>
      <el-button
        type="primary"
        class="btn-form-save"
        @click="submitForm(ruleForm)"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'create'
}
</script>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import {
  addOrganization,
  updateOrganization,
  getOrganizationInfo,
  addChildrenOrganization,
  updateOrganizationStatus,
  getChildrenOrganizationList
} from '@/api/system'
import { renderAreaCode, renderAreaArr } from '@/utils/index.js'
import { useUserStore } from '@/pinia/modules/user'
import areaCode from '@/components/area-cascader/areaCode.js'

const emit = defineEmits(['close', 'submitForm', 'update:btn-loading'])
const props = defineProps({
  isEdit: Boolean,
  parentId: String,
  parentInfo: {
    type: Object,
    default() {
      return {}
    }
  },
  id: String,
  btnLoading: {
    type: Boolean,
    default() {
      return false
    }
  }
})

const checkSort = (rule, value, callback) => {
  if (!Number.isInteger(value)) {
    callback(new Error('请输入数字值'))
  } else {
    if (value < 0) {
      callback(new Error('请输入大于0的数值'))
    } else {
      callback()
    }
  }
}
const ruleForm = ref()
const level = ref(1)
const validMsg = {
  1: '请选择到省级',
  2: '请选择到市级',
  3: '请选择到区级',
  4: '请选择到街道',
  5: '请选择到社区'
}
const loading = ref(false)
const disabled = ref(false)
const userAreaArr2 = ref([areaCode.defaultProvince])
const keyValue = ref(new Date().getTime())
const userStore = useUserStore()
const userAreaArr = ref(userStore.userAreaArr)
const orgInfo = userStore.orgInfo
const searchOption = reactive({
  city: '厦门',
  citylimit: false
})
const Bean = reactive({
  formData: { areaArr: [] }
})
const areaInfo = reactive({
  area: {}
})
const rules = reactive({
  orgName: [
    {
      required: true,
      message: '请输入',
      trigger: 'blur'
    }
  ]
})

const operatorsList = ref([])
const zoom = ref(10)
const options = ref([
  {
    value: 1,
    label: '省'
  },
  {
    value: 2,
    label: '市'
  },
  {
    value: 3,
    label: '区县'
  },
  {
    value: 4,
    label: '街道'
  },
  {
    value: 5,
    label: '社区'
  }
])
const zooms = ref([10, 18])
const center = ref([118.130944, 24.488528])
const markers = ref([])

onMounted(() => {
  if (props.isEdit) {
    loadBean(props.id)
  }
})

const loadBean = id => {
  console.log('id', id)
  loading.value = true
  getOrganizationInfo(id).then(result => {
    loading.value = false
    console.log('result', result)
    const data = result.data

    // 默认提交数据
    Bean.formData.areaArr = renderAreaArr(1, result.data)
    Bean.formData.orgName = data.orgName
    Bean.formData.remark = data.remark
    Bean.formData.orgPid = data.orgPid
    Bean.formData.level = data.level
    level.value = data.level
    Bean.formData.id = data.id
    props.parentInfo.orgName = data.porgName
    loading.value = false
    // 坐标
    if (data.latitude && data.longitude) {
      drawMarker(data.longitude, data.latitude)
    }
  })
}

// 绘制坐标点
const drawMarker = (lng, lat) => {
  const markers1 = []
  markers1.push({
    position: [lng, lat],
    icon: ''
  })
  center.value = [lng, lat]
  markers.value = markers1
  Bean.formData.latitude = lat
  Bean.formData.longitude = lng
}

// map点击拾取坐标
const mapClick = e => {
  console.log(e)
  drawMarker(e.lnglat.lng, e.lnglat.lat)
}

const regionChange = d => {
  areaInfo.area = d
}

const close = () => {
  emit('close')
}

const submitForm = formName => {
  formName.validate(valid => {
    console.log('console.log(Bean.formData)', Bean.formData)
    console.log('valid', valid)
    if (valid) {
      if (props.parentId != '') {
        Bean.formData.orgPid = !props.isEdit
          ? props.parentId
          : Bean.formData.orgPid
        Bean.formData.level = !props.isEdit
          ? props.parentInfo.level + 1
          : Bean.formData.level
      }
      renderAreaCode(1, Bean.formData.areaArr, Bean.formData)

      emit('submitForm', Bean.formData)
    }
  })
}
</script>

<style scoped>
.el-form-item__content {
  margin-left: 0px;
}

.rg-caret-down {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 150px;
  border-top: 4px solid;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  vertical-align: middle;
  content: '';
}

.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.rg-default-btn {
  width: 220px;
  text-align: left;
  display: inline-block;
  position: relative;
  padding: 5px 12px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.42857143;
  outline: 0 !important;
  color: #666;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.el-vue-search-box-container.search-box {
  position: absolute;
  left: 10px;
  top: 10px;
}
</style>
